<template>
<div class="baseValid">
  <el-collapse v-model="show">
    <el-collapse-item v-if="status.base_chk_status !== 0" name="1">
      <template slot="title">
        平台信息 <i class=" header-icon el-icon-info"></i>
      </template>
      <el-col :span="24">
        <p><span>商户编号：</span>{{ base.merchant_num }}</p>
        <p><span>所属代理商：</span>{{ base.agent_name }}</p>
        <p><span>所属业务员：</span>{{ base.saleman_name }}</p>
        <p><span>用户名：</span>{{ base.username }}</p>
        <p><span>密码：</span>{{ base.password }}</p>
      </el-col>
      <h3>商户基础信息</h3>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>商户类型：</span> {{ base.type === 100 ? '公司' : base.type === 200 ? '个体户' : base.type === 300 ? '小微商户': '无' }}</p></el-col>
      <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"><p><span>商户名称：</span>{{ base.full_name }}</p></el-col>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>商户简称：</span>{{ base.short_name }}</p></el-col>
      <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"><p><span>商户地址：</span>{{ base.real_address }}</p></el-col>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>客服电话：</span> {{ base.service_phone }}</p></el-col>
      <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"><p><span>证件类型：</span>{{ base.bus_licence_type === 1 ? '营业执照' : base.bus_licence_type === 2 ? '租凭合同': '无' }}</p></el-col>
      <el-col v-if="base.bus_licence_type === 1" :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>证件编号：</span>{{ base.bus_licence_no }}</p></el-col>
      <el-col v-if="base.bus_licence_type === 1" :xl="16" :lg="12" :md="12" :sm="24" :xs="24"><p><span>注册时间：</span>{{ base.bus_licence_reg_date !== '' ? base.bus_licence_reg_date : '永久' }}</p></el-col>
      <el-col v-if="base.bus_licence_type === 1" :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>到期时间：</span>{{ base.bus_licence_expire !== '' ? base.bus_licence_expire : '永久' }}</p></el-col>
      <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24"><p>
        <span>店铺照片：</span>
        <img v-if="base.store_face" :src="base.store_face" @click="handleClickZoomImg(base.store_face)" title="门头照">
        <img v-if="base.store_space" :src="base.store_space" @click="handleClickZoomImg(base.store_space)" title="店内场景照">
        <img v-if="base.store_counter" :src="base.store_counter" @click="handleClickZoomImg(base.store_counter)" title="收银台照片">
        <img v-if="base.store_canyin_plat" :src="base.store_canyin_plat" @click="handleClickZoomImg(base.store_canyin_plat)" title="入驻餐饮材料">
      </p></el-col>
      <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24"><p>
        <span>证件照片：</span>
        <img :src="base.bus_licence" alt="" v-if="base.bus_licence_type === 1" title="营业执照">
        <img v-for="item in base.bus_lease_agreement" :key="item.uid" :src="item.url" v-if="base.bus_licence_type === 2">
        <img v-for="(item, index) in base.bus_licence_oth" :src="item.url" :key="index" title="其他照片">
      </p></el-col>
    </el-collapse-item>
    <el-collapse-item v-if="status.bank_chk_status !== 0" name="2">
      <template slot="title">
        账户信息 <i class=" header-icon el-icon-info"></i>
      </template>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>账户类型：</span>{{ bank.bank_account_type === 100 ? '对公' : bank.bank_account_type === 200 ? '对私' : '无'}}</p></el-col>
      <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"><p><span>户名：</span>{{ bank.bank_account_name }}</p></el-col>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>银行卡号：</span>{{ bank.bank_account_no }}</p></el-col>
      <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"><p><span>开户行：</span>{{ bank.bank_name }}</p></el-col>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>开户行支行：</span>{{ bank.bank_branch_code_name.bank_name }}</p></el-col>
      <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"><p><span>开户行地址：</span>{{ bank.bank_address.name }}</p></el-col>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>预留手机号：</span> {{ bank.bank_pre_mobile}}</p></el-col>
      <el-col v-if="bank.bank_account_type === 200" :xl="16" :lg="12" :md="12" :sm="24" :xs="24"><p><span>证件类型：</span> {{ bank.bank_id_card_type === 1 ? '身份证' : ''}}</p></el-col>
      <el-col v-if="bank.bank_account_type === 200" :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>证件号码：</span> {{ bank.bank_id_card_no}}</p></el-col>
      <el-col v-if="bank.bank_account_type === 200" :xl="16" :lg="12" :md="12" :sm="24" :xs="24"><p><span>证件地址：</span> {{ bank.bank_id_card_addr}}</p></el-col>
      <el-col v-if="bank.bank_account_type === 200" :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>证件有效期：</span> {{ bank.bank_id_card_expire ? bank.bank_id_card_expire : '永久'}}</p></el-col>
      <el-col :xl="24" :lg="12" :md="12" :sm="24" :xs="24"><p>
        <span>银行卡照片：</span>
        <img v-if="bank.bank_card" :src="bank.bank_card" @click="handleClickZoomImg(bank.bank_card)" title="银行卡照片">
        <img v-if="bank.leader_id_1" :src="bank.leader_id_1" @click="handleClickZoomImg(bank.leader_id_1)" title="身份证正面照">
        <img v-if="bank.leader_id_2" :src="bank.leader_id_2" @click="handleClickZoomImg(bank.leader_id_2)" title="身份证反面照">
        <img v-if="bank.leader_id_3" :src="bank.leader_id_3" @click="handleClickZoomImg(bank.leader_id_3)" title="手持身份证照">
        <img v-if="bank.bank_permit" :src="bank.bank_permit" @click="handleClickZoomImg(bank.bank_permit)" title="开户许可证">
        <img v-if="bank.bank_card_inhand" :src="bank.bank_card_inhand" @click="handleClickZoomImg(bank.bank_card_inhand)" title="手持银行卡正面照">
      </p></el-col>
    </el-collapse-item>
    <el-collapse-item v-if="status.leader_chk_status !== 0" name="3">
      <template slot="title">
        法人信息 <i class=" header-icon el-icon-info"></i>
      </template>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>负责人性质：</span>{{ leader.leader_type === 1 ? '法人' : leader.leader_type === 0 ? '非法人' : '' }}</p></el-col>
      <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"><p><span>负责人姓名：</span>{{ leader.leader_name }}</p></el-col>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>联系电话：</span>{{ leader.leader_phone }}</p></el-col>
      <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"><p><span>证件类型：</span>{{ leader.leader_id_type === 1 ? '身份证' : '' }}</p></el-col>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>证件号码：</span>{{ leader.leader_id_no }}</p></el-col>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>证件到期日：</span>{{ leader.leader_id_expire !== '' ? leader.leader_id_expire : '永久' }}</p></el-col>
      <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24"><p>
        <span>证件照片：</span>
        <img v-if="leader.leader_id_1" :src="leader.leader_id_1" @click="handleClickZoomImg(leader.leader_id_1)" title="正面照">
        <img v-if="leader.leader_id_2" :src="leader.leader_id_2" @click="handleClickZoomImg(leader.leader_id_2)" title="背面照">
        <img v-if="leader.leader_id_3" :src="leader.leader_id_3" @click="handleClickZoomImg(leader.leader_id_3)" title="手持证件照">
      </p></el-col>
    </el-collapse-item>
    <el-collapse-item v-if="status.contact_chk_status !== 0" name="4">
      <template slot="title">
         联系人信息 <i class=" header-icon el-icon-info"></i>
      </template>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>姓名：</span>{{ contact.contact_name }}</p></el-col>
      <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"><p><span>电话：</span>{{ contact.contact_phone }}</p></el-col>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>QQ：</span>{{ contact.contact_qq }}</p></el-col>
      <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"><p><span>微信：</span>{{ contact.contact_weixin }}</p></el-col>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>邮箱：</span>{{ contact.contact_email }}</p></el-col>
      <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"><p><span>职务：</span>{{ contact.contact_duties }}</p></el-col>
      <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"><p><span>支付宝账号：</span>{{ contact.cantact_alipay }}</p></el-col>
    </el-collapse-item>
  </el-collapse>
</div>
</template>

<script>
import { baseDetailsInit } from '@/api/shop'

export default {
  data() {
    return {
      show: ['1', '2', '3', '4'],
      base: {
        agent_name: '',
        merchant_num: '',
        saleman_name: '',
        username: '',
        password: '',
        type: '',
        full_name: '',
        short_name: '',
        real_address: '',
        service_phone: '',
        bus_licence_type: '',
        bus_licence_no: '',
        bus_licence_reg_date: '',
        bus_licence_expire: '',
        alipay_account: '',
        alipay_name: '',
        store_face: '',
        store_space: '',
        store_counter: '',
        bus_lease_agreement: [],
        bus_licence: '',
        store_canyin_plat: '',
        bus_licence_oth: []
      },
      bank: {
        bank_account_type: '',
        bank_account_name: '',
        bank_account_no: '',
        bank_name: '',
        bank_branch_code_name: {},
        bank_pre_mobile: '',
        bank_id_card_no: '',
        bank_id_card_addr: '',
        bank_id_card_type: '',
        bank_id_card_expire: '',
        bank_address: '',
        bank_card: '',
        bank_card_inhand: '',
        bank_certi: '',
        leader_id_1: '',
        leader_id_2: '',
        leader_id_3: '',
        bank_permit: ''
      },
      leader: {
        leader_type: '',
        leader_phone: '',
        leader_name: '',
        leader_id_type: '',
        leader_id_no: '',
        leader_id_expire: '',
        leader_id_1: '',
        leader_id_2: '',
        leader_id_3: ''
      },
      contact: {
        cantact_alipay: '',
        contact_duties: '',
        contact_email: '',
        contact_name: '',
        contact_phone: '',
        contact_qq: '',
        contact_weixin: ''
      },
      status: {}
    }
  },
  methods: {
    handleDocumentInit() {
      baseDetailsInit(this.$route.query.merchant_num).then(res => {
        // status start
        this.status = res.data.result.info_status
        this.base.agent_name = res.data.result.base.agent_name
        this.base.saleman_name = res.data.result.base.saleman_name
        this.base.merchant_num = res.data.result.base.merchant_num
        this.base.username = res.data.result.base.username
        this.base.password = res.data.result.base.password
        this.base.type = res.data.result.base.type
        this.base.full_name = res.data.result.base.full_name
        this.base.short_name = res.data.result.base.short_name
        this.base.real_address = res.data.result.base.real_address
        this.base.service_phone = res.data.result.base.service_phone
        this.base.bus_licence_type = res.data.result.base.bus_licence_type
        this.base.bus_licence_no = res.data.result.base.bus_licence_no
        this.base.bus_licence_reg_date = res.data.result.base.bus_licence_reg_date
        this.base.bus_licence_expire = res.data.result.base.bus_licence_expire
        this.base.alipay_account = res.data.result.base.alipay_account
        this.base.alipay_name = res.data.result.base.alipay_name
        if (res.data.result.base.photo.length !== 0) {
          this.base.store_face = res.data.result.base.photo.store_face[0]
          this.base.store_space = res.data.result.base.photo.store_space[0]
          this.base.store_counter = res.data.result.base.photo.store_counter[0]
          res.data.result.base.photo.hasOwnProperty('store_canyin_plat') ? this.base.store_canyin_plat = res.data.result.base.photo.store_canyin_plat[0] : this.base.store_canyin_plat = ''
          res.data.result.base.photo.hasOwnProperty('bus_licence') ? this.base.bus_licence = res.data.result.base.photo.bus_licence[0] : this.base.bus_licence = ''
          res.data.result.base.photo.hasOwnProperty('bus_lease_agreement') ? this.base.bus_lease_agreement = res.data.result.base.photo.bus_lease_agreement : this.base.bus_lease_agreement = []
          res.data.result.base.photo.hasOwnProperty('bus_licence_oth') ? this.base.bus_licence_oth = res.data.result.base.photo.bus_licence_oth : this.base.bus_licence_oth = []
        }
        // bank start
        this.bank.bank_account_type = res.data.result.bank.bank_account_type
        this.bank.bank_account_name = res.data.result.bank.bank_account_name
        this.bank.bank_account_no = res.data.result.bank.bank_account_no
        this.bank.bank_name = res.data.result.bank.bank_name
        this.bank.bank_address = res.data.result.bank.bank_address
        this.bank.bank_branch_name = res.data.result.bank.bank_branch_name
        this.bank.bank_branch_code_name = res.data.result.bank.bank_branch_code_name
        this.bank.bank_pre_mobile = res.data.result.bank.bank_pre_mobile
        this.bank.bank_id_card_type = res.data.result.bank.bank_id_card_type
        this.bank.bank_id_card_no = res.data.result.bank.bank_id_card_no
        this.bank.bank_id_card_addr = res.data.result.bank.bank_id_card_addr
        this.bank.bank_id_card_expire = res.data.result.bank.bank_id_card_expire
        if (res.data.result.bank.photo.length !== 0) {
          res.data.result.bank.photo.hasOwnProperty('bank_permit') ? this.bank.bank_permit = res.data.result.bank.photo.bank_permit[0] : this.bank.bank_permit = ''
          res.data.result.bank.photo.hasOwnProperty('leader_id_3') ? this.bank.leader_id_3 = res.data.result.bank.photo.leader_id_3[0] : this.bank.leader_id_3 = ''
          res.data.result.bank.photo.hasOwnProperty('bank_card') ? this.bank.bank_card = res.data.result.bank.photo.bank_card[0] : this.bank.bank_card = ''
          res.data.result.bank.photo.hasOwnProperty('bank_idcard_2') ? this.bank.leader_id_2 = res.data.result.bank.photo.bank_idcard_2[0] : this.bank.leader_id_2 = ''
          res.data.result.bank.photo.hasOwnProperty('bank_idcard_1') ? this.bank.leader_id_1 = res.data.result.bank.photo.bank_idcard_1[0] : this.bank.leader_id_1 = ''
          res.data.result.bank.photo.hasOwnProperty('bank_card_inhand') ? this.bank.bank_card_inhand = res.data.result.bank.photo.bank_card_inhand[0] : this.bank.bank_card_inhand = ''
        }
        // leader start
        this.leader.leader_id_expire = res.data.result.leader.leader_id_expire
        this.leader.leader_id_no = res.data.result.leader.leader_id_no
        this.leader.leader_name = res.data.result.leader.leader_name
        this.leader.leader_phone = res.data.result.leader.leader_phone
        this.leader.leader_type = res.data.result.leader.leader_id_type
        this.leader.leader_id_type = res.data.result.leader.leader_id_type
        if (res.data.result.leader.photo.length !== 0) {
          this.leader.leader_id_1 = res.data.result.leader.photo.leader_id_1[0]
          this.leader.leader_id_2 = res.data.result.leader.photo.leader_id_2[0]
          res.data.result.leader.photo.hasOwnProperty('leader_id_3') ? this.leader.leader_id_3 = res.data.result.leader.photo.leader_id_3[0] : this.leader.leader_id_3 = ''
        }
        // contact start
        this.contact.cantact_alipay = res.data.result.contact.cantact_alipay
        this.contact.contact_duties = res.data.result.contact.contact_duties
        this.contact.contact_email = res.data.result.contact.contact_email
        this.contact.contact_name = res.data.result.contact.contact_name
        this.contact.contact_phone = res.data.result.contact.contact_phone
        this.contact.contact_qq = res.data.result.contact.contact_qq
        this.contact.contact_weixin = res.data.result.contact.contact_weixin
      })
    },
    handleClickZoomImg(url) {
      this.$alert(`<img width="100%" heigth="100%" src= ${url}></img>`, {
        dangerouslyUseHTMLString: true,
        center: true,
        showConfirmButton: false,
        closeOnClickModal: true,
        closeOnPressEscape: true
      }).then(() => {
        return false
      }).catch(() => {
        return false
      })
    }
  },
  mounted() {
    this.handleDocumentInit()
  }
}
</script>
<style lang="scss" scoped>
  .baseValid {
    h3 {
      border-bottom: 1px solid #ddd;
    }
    p {
      margin-top: 0;
      span {
        display: inline-block;
        width: 90px;
        text-align: right;
      }
      img {
        vertical-align: top;
        margin-right: 10px;
        width: 100px;
        height: 100px;
        border-radius: 6px;
        border: 1px dashed #d9d9d9;
      }
    }
    .btn {
      padding-left: 90px;
      padding-top: 20px;
      .el-button {
        padding: 9px 25px;
      }
    }
  }
</style>
